{% extends "base.html" %}

{% block content %}
<div class="algorithm-page">
    <h2>DCT算法 - 离散余弦变换隐写</h2>
    
    <div class="algorithm-description">
        <p>DCT算法通过修改图像频域系数来隐藏信息，具有较好的抗压缩性。</p>
        <p><strong>使用提示：</strong>DCT算法对JPEG压缩有较好的鲁棒性，适合需要抗压缩的场景。</p>
    </div>
    
    <div class="algorithm-controls">
        <div class="control-section">
            <h3>嵌入信息</h3>
            <form id="embed-form" enctype="multipart/form-data">
                <div class="form-group">
                    <label for="embed-image">选择载体图像:</label>
                    <input type="file" id="embed-image" name="image" accept="image/jpeg,image/png,image/bmp" required>
                    <small>支持格式: JPEG, PNG, BMP</small>
                </div>
                
                <div class="form-group">
                    <label for="embed-message">隐藏信息:</label>
                    <textarea id="embed-message" name="message" rows="4" placeholder="输入要隐藏的信息" required></textarea>
                    <small>建议使用较短的文本信息</small>
                </div>
                
                <div class="form-group">
                    <label for="quality-factor">JPEG质量因子:</label>
                    <input type="range" id="quality-factor" name="quality" min="50" max="100" value="80">
                    <span id="quality-value">80</span>
                </div>
                
                <button type="submit" class="btn">嵌入信息</button>
            </form>
            
            <div id="embed-result" class="result"></div>
        </div>
        
        <div class="control-section">
            <h3>提取信息</h3>
            <form id="extract-form" enctype="multipart/form-data">
                <div class="form-group">
                    <label for="extract-image">选择隐写图像:</label>
                    <input type="file" id="extract-image" name="image" accept="image/jpeg,image/png,image/bmp" required>
                    <small>请使用嵌入时生成的图像</small>
                </div>
                
                <button type="submit" class="btn">提取信息</button>
            </form>
            
            <div id="extract-result" class="result">
                <label>提取的信息:</label>
                <textarea id="extracted-message" rows="4" readonly placeholder="提取的信息将显示在这里"></textarea>
                <div id="extract-status"></div>
            </div>
        </div>
    </div>
    
    <div class="algorithm-info">
        <h3>DCT算法原理</h3>
        <div class="info-content">
            <p><strong>工作原理：</strong></p>
            <ul>
                <li>将图像分割为8×8的块</li>
                <li>对每个块进行离散余弦变换(DCT)</li>
                <li>修改中频系数来嵌入信息</li>
                <li>进行逆DCT变换重构图像</li>
            </ul>
            
            <p><strong>优点：</strong></p>
            <ul>
                <li>对JPEG压缩有较好的鲁棒性</li>
                <li>隐藏信息分布在频域，不易察觉</li>
                <li>适合实际应用场景</li>
            </ul>
            
            <p><strong>注意事项：</strong></p>
            <ul>
                <li>嵌入容量相对较小</li>
                <li>对图像质量有一定影响</li>
                <li>建议使用质量因子较高的JPEG</li>
            </ul>
        </div>
    </div>
    
    <div class="debug-info">
        <h3>调试信息</h3>
        <div id="debug-console" style="background: #f8f9fa; padding: 10px; border-radius: 4px; font-family: monospace; font-size: 12px; height: 100px; overflow-y: auto;"></div>
    </div>
</div>

<script>
    function debugLog(message) {
        const console = document.getElementById('debug-console');
        const timestamp = new Date().toLocaleTimeString();
        console.innerHTML += `[${timestamp}] ${message}\n`;
        console.scrollTop = console.scrollHeight;
    }

    // 更新质量因子显示
    document.getElementById('quality-factor').addEventListener('input', function() {
        document.getElementById('quality-value').textContent = this.value;
    });

    document.getElementById('embed-form').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        const resultDiv = document.getElementById('embed-result');
        
        debugLog('开始DCT嵌入信息...');
        debugLog(`质量因子: ${formData.get('quality')}`);
        
        fetch('/embed_dct', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                resultDiv.innerHTML = `
                    <div class="success">${data.message}</div>
                    <a href="${data.image_url}" class="btn" download>下载隐写图像</a>
                `;
                debugLog('DCT信息嵌入成功！');
            } else {
                resultDiv.innerHTML = `<div class="error">${data.error}</div>`;
                debugLog(`DCT嵌入失败: ${data.error}`);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            resultDiv.innerHTML = `<div class="error">发生错误: ${error.message}</div>`;
            debugLog(`DCT请求错误: ${error.message}`);
        });
    });
    
    document.getElementById('extract-form').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        const statusDiv = document.getElementById('extract-status');
        const messageTextarea = document.getElementById('extracted-message');
        
        statusDiv.innerHTML = '<div>正在提取信息...</div>';
        messageTextarea.value = '';
        debugLog('开始DCT提取信息...');
        
        fetch('/extract_dct', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                messageTextarea.value = data.message;
                if (data.message) {
                    statusDiv.innerHTML = '<div class="success">信息提取成功！</div>';
                    debugLog('DCT信息提取成功！');
                } else {
                    statusDiv.innerHTML = '<div class="error">未找到隐藏信息</div>';
                    debugLog('未找到DCT隐藏信息');
                }
            } else {
                messageTextarea.value = '';
                statusDiv.innerHTML = `<div class="error">${data.error}</div>`;
                debugLog(`DCT提取失败: ${data.error}`);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            messageTextarea.value = '';
            statusDiv.innerHTML = `<div class="error">发生错误: ${error.message}</div>`;
            debugLog(`DCT请求错误: ${error.message}`);
        });
    });

    // 示例代码展示
    document.addEventListener('DOMContentLoaded', function() {
        debugLog('DCT算法页面加载完成');
        debugLog('准备进行离散余弦变换隐写操作');
    });
</script>

<style>
.algorithm-info {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    margin-top: 2rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.algorithm-info h3 {
    color: #2c3e50;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #3498db;
}

.info-content {
    line-height: 1.6;
}

.info-content p {
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.info-content ul {
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.info-content li {
    margin-bottom: 0.25rem;
}

.quality-control {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.quality-control input[type="range"] {
    flex: 1;
}

.quality-control span {
    min-width: 30px;
    text-align: center;
    font-weight: bold;
    color: #3498db;
}

.form-group input[type="range"] {
    width: 100%;
    margin-top: 0.5rem;
}
</style>
{% endblock %}